<template>
  <div style="margin-top:20px">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :lg="6">
        <Card title="总销售额" value="￥ 126560">
          <template>
            <span>周同比56.67% <i class="el-icon-caret-top el-red" /> 日同比19.16% <i class="el-icon-caret-bottom el-green" /></span>
          </template>
          <template #footer>
            <span>日销售额￥ 12423</span>
          </template>
        </Card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <Card title="访问量" value="88460">
          <template>
            <LineChart />
          </template>
          <template #footer>
            <span>日访问量 12423</span>
          </template>
        </Card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <Card title="支付笔数" value="126560">
          <template>
            <BarChart />
          </template>
          <template #footer>
            <span>转化率 65%</span>
          </template>
        </Card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <Card title="运营活动效果" value="78%">
          <template>
            <ProgressChart />
          </template>
          <template #footer>
            <span>日销售额￥ 12423</span>
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Card from './components/Card.vue'
import LineChart from './components/LineChart'
import BarChart from './components/BarChart'
import ProgressChart from './components/ProgressChart'
export default {
  name: 'Monitor',
  components: {
    Card,
    LineChart,
    BarChart,
    ProgressChart
  }
}
</script>

<style lang="scss" scoped>
.el-red {
  color: red;
}
.el-green {
  color: green;
}
</style>
